<template>
  <div class="clx-table">
    <!-- 表格标题、操作按钮 -->
    <div v-if="hasTitle" class="table-title">
      <p v-if="tableTitle" class="title">{{ tableTitle }}</p>
      <slot name="logTitle"></slot>
      <div class="btns">
        <slot name="tableButton"></slot>
      </div>
    </div>

    <!-- 表格 -->
    <div class="table-content">
      <slot name="table"></slot>
    </div>

    <!-- 分页 -->
    <el-pagination
      v-if="hasPage"
      class="pagination"
      background
      :current-page="page.pageNum || page.page"
      :page-size="page.pageSize"
      :page-sizes="pageSizeArr"
      :layout="layout"
      :total="page.total"
      @size-change="pageSizeChange"
      @current-change="pageNumChange"></el-pagination>
  </div>
</template>

<script setup lang="ts">
  /* props */
  const props = defineProps({
    // 是否有表格标题区域
    hasTitle: {
      type: Boolean,
      default: true,
    },
    tableTitle: {
      type: String,
      default: '列表：',
    },
    // 是否有分页
    hasPage: {
      type: Boolean,
      default: true,
    },
    page: {
      type: Object,
      default: () => {
        return {
          total: 0,
          pageNum: 1,
          page: 1,
          pageSize: 10,
        };
      },
    },
    // 分页的页容量数组
    pageSizeArr: {
      type: Array,
      default: () => {
        return [10, 20, 30, 50];
      },
    },
    // 分页的布局
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next',
    },
  });

  /*  emits */
  const emits = defineEmits(['pageSizeChange', 'pageNumChange']);

  /* methods */
  // 页条数改变
  const pageSizeChange = (val: number) => {
    emits('pageSizeChange', val);
  };
  // 当前页改变
  const pageNumChange = (val: number) => {
    emits('pageNumChange', val);
  };
</script>
<style lang="scss" scoped>
  .clx-table {
    width: 100%;
    background: #ffffff;
    border-radius: 4px;
    padding: 0 20px 20px;
    box-sizing: border-box;
    .table-title {
      display: flex;
      height: 50px;
      align-items: center;
      box-sizing: border-box;
      border-bottom: 1px dashed #e9e9e9;
      margin-bottom: 20px;
      .title {
        font-size: 14px;
        color: #666666;
        margin-right: auto;
      }
      .btns {
        margin-left: auto;
      }
    }

    .table-content {
      box-sizing: border-box;
    }

    .pagination {
      justify-content: center;
      margin-top: 30px;
      :deep(.el-pager li),
      :deep(.btn-prev),
      :deep(.btn-next) {
        min-width: 30px;
        height: 30px;
      }
    }
  }
</style>
